<template>
<div id="main">
 <div class="block">
    <span class="demonstration"></span>
    <el-carousel trigger="click" height="300px">
      <el-carousel-item v-for="item in ImgList" :key="item.id" style="border-radius:10px">
        <img :src="item.url" alt="" width="100%" height="100%"/>
      </el-carousel-item>
    </el-carousel>
    <div>
          <el-row>
      <el-col :span="14" style="padding: 5px">
        <div class="year">
          <h3>
            <!-- <i class="el-icon-bank-card green"></i>  -->
            本年度截至当前实际订单
          </h3>
          <ul>
            <li>
              <p>合同金额</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-marketing red"></i>
            </li>
            <li>
              <p>开票金额</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-ticket green"></i>
            </li>
            <li>
              <p>实际到款</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-finance blue"></i>
            </li>
            <li>
              <p>完成率</p>
              <p class="b"><span class="red">￥</span> 计算中...</p>
              <i class="el-icon-s-data red"></i>
            </li>
            <li>
              <p>完成率</p>
              <p class="b"><span class="red">￥</span> 计算中...</p>
              <i class="el-icon-s-data green"></i>
            </li>
            <li>
              <p>完成率</p>
              <p class="b"><span class="red">￥</span> 计算中...</p>
              <i class="el-icon-s-data blue"></i>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="warning">
          <h3>
            <!-- <i class="el-icon-warning red"></i>  -->
            预警信息</h3>
          <p>{{ warning }}</p>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="message">
          <h3>
            <!-- <i class="el-icon-phone red"></i>  -->
            消息提醒</h3>
          <p>{{ message }}</p>
        </div>
      </el-col>
    </el-row>
     <el-row>
      <el-col :span="24" style="padding: 5px">
        <div class="month">
          <h3>
            <!-- <i class="el-icon-bank-card green"></i>  -->
            本年度截至当前实际订单
          </h3>
          <ul>
            <li>
              <p>合同金额</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-marketing red"></i>
            </li>
            <li>
              <p>开票金额</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-ticket green"></i>
            </li>
            <li>
              <p>实际到款</p>
              <p class="b"><span class="red">￥</span> 0</p>
              <i class="el-icon-s-finance blue"></i>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" style="padding: 5px">
        <div class="mail">
          <h3>
            <!-- <i class="el-icon-message blue"></i>  -->
          邮件提醒</h3>
          <div class="list">
            <a href="#" v-for="item in mail" :key="item.id">
              {{ item.title }}
            </a>
          </div>
        </div>
      </el-col>
       <el-col :span="12" style="padding: 5px">
        <div class="task">
          <h3>
            <!-- <i class="el-icon-document blue"></i>  -->
          任务信息</h3>
          <p class="date">{{ date }}</p>
          <h4>{{ task.title }}</h4>
          <p class="content">{{ task.content }}</p>
          <a href="#">详情 
            <!-- <i class="el-icon-arrow-right"></i> -->
            </a>
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</div>
</template>

<script>
export default{
    data(){
        return{
          ImgList: [
        { id: 1, url: require("@/assets/1.jpg") },
        { id: 2, url: require("@/assets/2.jpg") },
        { id: 3, url: require("@/assets/3.jpg") },
        { id: 4, url: require("@/assets/4.jpg") },
      ],
      warning:
        "据中央气象台最新预报，未来3天，冷空气将影响中东部大部分地区，中东部大部分地区气温将下降6～10℃，局地12℃左右；长江中下游及其以北地区有4～6级偏北风。",
      message: "你可以去坐牢了",
      mail:[
        { id: 1, title: "邮件1" },
        { id: 2, title: "邮件2" },
        { id: 3, title: "邮件3" },
        { id: 4, title: "邮件4" },
        { id: 5, title: "邮件5" },
        { id: 6, title: "邮件6" },
      ],
      date:"",
      task: {
        title: "完成demo",
        content: "本地新建个jetrondemo的项目，然后完成用户管理页面。",
      },
      }
    },
    mounted(){
       this.date = this.getNewTime();
  },
    methods:{
      getNewTime() {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      // let hour = now.getHours();
      // let minu = now.getMinutes();
      // let sec = now.getSeconds();
      let time = year + "-" + month + "-" + date;
      // console.log(time);

      return time;
    },
    }
}
</script>

<style lang="scss" scoped>
#main{
    width: 100%;
    height: 100%;
    .block{
        width: 100%;
    }
    .img {
  height: 350px;
  background-color: #fff;
  // border-radius: 10px;
  overflow: hidden;
}
h3{
  text-align: center;
}
.year {
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.red {
    color: #fa8564;
  }
  .green {
    color: #aec785;
  }
  .blue {
    color: #22beef;
  } 
  li{
    position: relative;
    float: left;
    width: 33%;
    height: 130px;
    border: 1px solid #f2f2f2;
  }
   i {
      position: absolute;
      right: 8px;
      top: 28px;
      font-size: 76px;
    }
    p {
      margin: 38px 0 0 15px;
    }
     .b {
      margin: 15px 0 0 15px;
      font-weight: 1000;
    }
  //     li:nth-of-type(3n) {
  //   border-right: 5px;
  // }

  .warning {
  height: 145px;
  background-color: #fff;
  border-radius: 10px;
  margin: 5px;
  h3 {
    text-indent: 6px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
  }
  p {
    text-indent: 1.5em;
    margin: 5px;
    height: 115px;
    overflow: auto;
  }
}
.message {
  height: 145px;
  background-color: #fff;
  border-radius: 10px;
  margin: 5px;
  h3 {
    text-indent: 6px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
  }
  p {
    text-indent: 1.5em;
    margin: 5px;
    height: 115px;
    overflow: auto;
  }
}
.month {
  height: 150px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  h3 {
    text-indent: 6px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
  }
  li {
    position: relative;
    float: left;
    width: 33.1%;
    height: 110px;
    border-bottom: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    i {
      position: absolute;
      right: 8px;
      top: 18px;
      font-size: 76px;
    }
    p {
      margin: 28px 0 0 15px;
    }
    .b {
      margin: 15px 0 0 15px;
      font-weight: 700;
    }
  }
  li:nth-of-type(3n) {
    border-right: 0;
  }
}
.mail {
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  h3 {
    text-indent: 6px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
  }
  .list {
    height: 260px;
    overflow: auto;
    a {
      display: block;
      text-indent: 20px;
      line-height: 40px;
      border-bottom: 1px solid #f2f2f2;
    }
  }
}

.task {
  position: relative;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  overflow: auto;
  h3 {
    text-indent: 6px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
  }
  .date {
    margin: 5px 0 0 10px;
  }
  h4 {
    font-size: 28px;
    text-align: center;
    margin-top: 10px;
  }
  .content {
    text-indent: 1.5em;
    margin: 5px;
  }
  a {
    position: absolute;
    bottom: 14px;
    right: 20px;
  }
}
}
</style>